<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 4399小游戏</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js" defer></script>
    <script src="js/upload.js"></script>
    <style>
        /* 个人中心特定样式 */
        .profile-container {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .user-info {
            flex-basis: 300px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        .user-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: block;
            object-fit: cover;
            border: 3px solid #27ae60;
        }
        
        .user-stats {
            margin: 20px 0;
            text-align: center;
        }
        
        .user-stat {
            display: inline-block;
            margin: 0 10px;
            font-size: 14px;
            color: #666;
        }
        
        .stat-number {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #27ae60;
        }
        
        .profile-tabs {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .tab-button {
            padding: 10px 20px;
            margin-right: 5px;
            background: none;
            border: none;
            font-size: 16px;
            color: #666;
            cursor: pointer;
        }
        
        .tab-button.active {
            color: #27ae60;
            border-bottom: 2px solid #27ae60;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .game-management {
            flex-grow: 1;
        }
        
        .game-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .game-item {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .game-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .game-actions {
            display: flex;
            border-top: 1px solid #eee;
        }
        
        .game-action {
            flex: 1;
            padding: 10px;
            text-align: center;
            color: #666;
            cursor: pointer;
            font-size: 14px;
            border-right: 1px solid #eee;
        }
        
        .game-action:last-child {
            border-right: none;
        }
        
        .game-action:hover {
            background-color: #f9f9f9;
            color: #27ae60;
        }
        
        .edit-form {
            margin-top: 20px;
        }
        
        .profile-section {
            margin-bottom: 30px;
        }
        
        .profile-section h3 {
            margin-bottom: 15px;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .button-group {
            margin-top: 20px;
        }
        
        .button-green {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .button-outline {
            background-color: transparent;
            color: #27ae60;
            border: 1px solid #27ae60;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1>4399小游戏</h1>
            </div>
            <ul class="nav-links">
                <li><button id="uploadBtn" class="upload-btn">上传游戏</button></li>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">小游戏</a></li>
                <li class="user-actions">
                    <div class="user-profile">
                        <span class="username">用户名</span>
                        <div class="user-dropdown">
                            <a href="profile.html" class="active">个人中心</a>
                            <a href="#">我的游戏</a>
                            <a href="#">设置</a>
                            <a href="#" id="logoutBtn">退出登录</a>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="search-box">
                <input type="text" placeholder="搜索游戏...">
                <button>搜索</button>
            </div>
        </nav>
    </header>

    <div class="container">
        <main>
            <section class="page-header">
                <h2>个人中心</h2>
                <p>管理您的游戏和个人资料</p>
            </section>

            <div class="profile-container">
                <div class="user-info">
                    <img src="https://via.placeholder.com/120" alt="用户头像" class="user-avatar">
                    <h3 style="text-align: center;">用户名</h3>
                    <p style="text-align: center; color: #666;">加入时间：2023-01-15</p>
                    
                    <div class="user-stats">
                        <div class="user-stat">
                            <span class="stat-number">12</span>
                            上传游戏
                        </div>
                        <div class="user-stat">
                            <span class="stat-number">256</span>
                            获赞
                        </div>
                        <div class="user-stat">
                            <span class="stat-number">5.0</span>
                            评分
                        </div>
                    </div>
                    
                    <div class="button-group" style="text-align: center;">
                        <button class="button-outline">编辑资料</button>
                    </div>
                </div>
                
                <div class="game-management">
                    <div class="profile-tabs">
                        <button class="tab-button active" data-tab="my-games">我的游戏</button>
                        <button class="tab-button" data-tab="uploaded-games">已上传游戏</button>
                        <button class="tab-button" data-tab="profile-settings">个人设置</button>
                    </div>
                    
                    <div id="my-games" class="tab-content active">
                        <div class="game-list">
                            <div class="game-item">
                                <img src="https://via.placeholder.com/300x180" alt="游戏截图" style="width: 100%;">
                                <div style="padding: 15px;">
                                    <h3>超级泡泡龙</h3>
                                    <p style="color: #666; font-size: 14px;">上传时间：2023-05-20</p>
                                    <p style="margin-top: 5px; font-size: 14px;">
                                        <span style="color: #27ae60; font-weight: bold;">4.8</span>
                                        <span style="color: #666;"> | 游玩：1,245次</span>
                                    </p>
                                </div>
                                <div class="game-actions">
                                    <div class="game-action">编辑</div>
                                    <div class="game-action">统计</div>
                                    <div class="game-action">删除</div>
                                </div>
                            </div>
                            
                            <div class="game-item">
                                <img src="" alt="游戏截图" style="width: 100%;">
                                <div style="padding: 15px;">
                                    <h3>模拟城市</h3>
                                    <p style="color: #666; font-size: 14px;">上传时间：2023-04-15</p>
                                    <p style="margin-top: 5px; font-size: 14px;">
                                        <span style="color: #27ae60; font-weight: bold;">4.5</span>
                                        <span style="color: #666;"> | 游玩：958次</span>
                                    </p>
                                </div>
                                <div class="game-actions">
                                    <div class="game-action">编辑</div>
                                    <div class="game-action">统计</div>
                                    <div class="game-action">删除</div>
                                </div>
                            </div>
                            
                            <div class="game-item">
                                <img src="" alt="游戏截图" style="width: 100%;">
                                <div style="padding: 15px;">
                                    <h3>水果连连看</h3>
                                    <p style="color: #666; font-size: 14px;">上传时间：2023-03-10</p>
                                    <p style="margin-top: 5px; font-size: 14px;">
                                        <span style="color: #27ae60; font-weight: bold;">4.2</span>
                                        <span style="color: #666;"> | 游玩：723次</span>
                                    </p>
                                </div>
                                <div class="game-actions">
                                    <div class="game-action">编辑</div>
                                    <div class="game-action">统计</div>
                                    <div class="game-action">删除</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="uploaded-games" class="tab-content">
                        <div class="profile-section">
                            <h3>已上传游戏</h3>
                            <p>您上传的游戏将在审核通过后显示</p>
                            
                            <div class="game-list">
                                <div class="game-item">
                                    <img src="https://via.placeholder.com/300x180" alt="游戏截图" style="width: 100%;">
                                    <div style="padding: 15px;">
                                        <h3>卡牌对决</h3>
                                        <p style="color: #666; font-size: 14px;">上传时间：2023-06-05</p>
                                        <p style="margin-top: 5px; font-size: 14px; color: #ff9900;">
                                            审核中
                                        </p>
                                    </div>
                                    <div class="game-actions">
                                        <div class="game-action">编辑</div>
                                        <div class="game-action">取消上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="profile-settings" class="tab-content">
                        <div class="profile-section">
                            <h3>个人资料设置</h3>
                            <form class="edit-form">
                                <div class="form-group">
                                    <label for="display-name">显示名称</label>
                                    <input type="text" id="display-name" value="用户名" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="user-email">邮箱</label>
                                    <input type="email" id="user-email" value="user@example.com" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="user-bio">个人简介</label>
                                    <textarea id="user-bio" class="form-control" rows="4">热爱游戏的开发者</textarea>
                                </div>
                                <div class="button-group">
                                    <button type="submit" class="button-green">保存修改</button>
                                </div>
                            </form>
                        </div>
                        
                        <div class="profile-section">
                            <h3>修改密码</h3>
                            <form class="edit-form">
                                <div class="form-group">
                                    <label for="current-password">当前密码</label>
                                    <input type="password" id="current-password" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="new-password">新密码</label>
                                    <input type="password" id="new-password" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="confirm-password">确认新密码</label>
                                    <input type="password" id="confirm-password" class="form-control">
                                </div>
                                <div class="button-group">
                                    <button type="submit" class="button-green">更新密码</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于作者</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>帮助中心</h4>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">游戏攻略</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="https://weixin.qq.com/" target="_blank" title="关注我们的微信公众号">微信</a>
                    <a href="https://im.qq.com/" target="_blank" title="加入我们的QQ群">QQ</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2025 4399小游戏. All rights reserved.</p>
        </div>
    </footer>

    <!-- 上传游戏模态框 -->
    <div id="uploadModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>上传游戏</h2>
            <form id="uploadGameForm">
                <div class="form-group">
                    <label for="gameTitle">游戏标题</label>
                    <input type="text" id="gameTitle" name="title" required>
                </div>
                <div class="form-group">
                    <label for="gameCategory">游戏分类</label>
                    <select id="gameCategory" name="category" required>
                        <option value="">选择分类...</option>
                        <option value="casual">休闲游戏</option>
                        <option value="action">动作游戏</option>
                        <option value="puzzle">益智游戏</option>
                        <option value="strategy">策略游戏</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="gameDescription">游戏描述</label>
                    <textarea id="gameDescription" name="description" rows="4" required></textarea>
                </div>
                <div class="form-group">
                    <label for="gameFile">游戏文件</label>
                    <input type="file" id="gameFile" name="gameFile" required>
                </div>
                <div class="form-group">
                    <label for="gameThumbnail">游戏缩略图</label>
                    <input type="file" id="gameThumbnail" name="thumbnail" accept="image/*" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">上传游戏</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 选项卡切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有活动状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    const tabId = this.dataset.tab;
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });
    </script>

    <script src="js/api.js"></script>
    <script src="js/main.js"></script>
    <script src="js/upload.js"></script>
</body>
</html> 